<template>
  <!-- 100vh:元素高度为屏幕可见高度 -->
    <div style="height:100vh;
              background-image: linear-gradient(135deg,#1355F3,#3C82F5);
              overflow: auto;">
        <el-container style="padding: 30px; margin:0 auto;width: 1600px">
            <el-header>
                <el-row>
                    <el-col :span="3">
                        <img src="/imgs/login/logo.png" style="height: 50px;">
                    </el-col>
                    <el-col :span="1">
                        <img src="/imgs/login/auto.png" style="height: 50px;">
                    </el-col>
                    <el-col :span="1">
                        <img src="/imgs/login/verticalLine.png" style="height: 50px;">
                    </el-col>
                    <el-col :span="19">
                        <span style="color: #fff;font-weight: bold;font-size: 30px">智慧车辆运营管理系统</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :span="16">
                        <img src="/imgs/login/bg.png" style="width: 100%;margin-top: 60px">
                    </el-col>
                    <el-col :span="8">
                        <el-card style="margin-top: 80px;">
                            <h3 style="text-align: center">用户登录</h3>
                            <el-form :model="user" :rules="rules" ref="formRef"  label-position="top">
                                <el-form-item prop="username" label="用户名">
                                    <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                                </el-form-item>
                                <el-form-item prop="password" label="密码">
                                    <el-input v-model="user.password" placeholder="请输入密码"></el-input>
                                </el-form-item>
                              <el-form-item prop="validateCode" label="验证码">
                                <el-input @keydown.enter="login" v-model="user.validateCode" placeholder="请输入验证码" clearable style="width: 50%;"></el-input>
                                <validate-code style="height: 32px;margin-left: 50px" ref="ref_validateCode" @change="changeCode" />
                              </el-form-item>
                                <el-form-item>
                                    <el-button @click="login" type="primary" style="width: 100%">登录</el-button>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: center;color:#666;font-size: 14px;padding: 10px 0">
                                (体验账号：tom 密码：123456)
                            </div>

                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

</template>
<script setup>
import {ref} from "vue";
import axios from "axios";
import qs from "qs"
import {ElMessage} from "element-plus";
import router from "@/router";
import validateCode from "@/components/ValidateCode";


const user = ref({
    username:'',
    password:'',
    validateCode:''
})
const formRef = ref(null)
let genderCode = ''
const ref_validateCode = ref(null)
const changeCode = (value)=>{
  genderCode=value
}
const login = ()=>{
  formRef.value.validate((valid)=>{
      if(!valid){
          ElMessage.error('请检查输入的信息')
      }else{
          if(user.value.validateCode.toUpperCase() === genderCode){
              ElMessage.success('验证成功')
              let data = qs.stringify(user.value)
              axios.post(BASE_URL+'/v1/user/login',data)
                  .then((response)=>{
                      if(response.data.code===2000){
                          ElMessage.success('登录成功')
                          let user = response.data.data
                          localStorage.setItem('user',JSON.stringify(user))
                          console.log(JSON.parse(localStorage.user))
                          router.push('/')
                      }else{
                          ElMessage.error(response.data.msg)
                          user.value={username: '',password:''}
                      }
                  })
          }else{
              ElMessage.error('验证码输入错误')
              ref_validateCode.value.draw();
          }
      }
  })

}
const rules = {
  username:[
    {required:true,message:'请输入用户名',trigger:'blur'},
    {pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,20}$/,message:'用户名必须是3-20位的文字、字母、数字或下划线',trigger:'blur'}
  ],
  password:[
    {required: true, message: '请输入密码', trigger: 'blur'},
    //{pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/, message: '密码必须是6-20位的字母和数字的组合', trigger: 'blur'},
    {pattern: /^[A-Za-z0-9_]{6,20}$/, message: '密码必须是6-20位的字母、数字或下划线', trigger: 'blur'}
  ],
  validateCode:[
    {required:true,message:'请输入验证码',trigger:'blur'}
  ]
}

</script>


<style scoped>

</style>